import { Modal, Spin, Tooltip } from "antd";
import {
  WeaAvatar,
  WeaBrowser,
  WeaInputSearch,
  WeaNewScroll,
  WeaOrgTree,
  WeaTab,
} from "ecCom";
import { toJS } from "mobx";
import React from "react";
import { inject, observer } from 'mobx-react';
import * as Util from "../../../util/Util";
import { i18n } from "../../../public/i18n";



@inject("individualMainStore")
@observer
export default class AttentionOrgTreeSelect extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputLeftDom: "<span>"+i18n.label.orgaStructure()+"</span>",
      _selectKey:[],
    };
    this.store = this.props.individualMainStore;
  }

  componentWillMount() {
    this.store.onTreTabChange("1");
  }

  onCancleAttention = (e,index,item)=>{
    e.preventDefault();
    e.stopPropagation();
    this.store.cancleAttention(index,item);
  }

  onAttentionClick(e,item) {
    e.preventDefault();
    e.stopPropagation();
    const {
      onTreAttentionItemClick
    } = this.store;
    onTreAttentionItemClick(item);
  }

  /**
   * 组织结构Index页面内容
   */
  get orgStrucContent() {
    const { _selectKey } = this.state;
    let { userRoot,hrmId} = this.store;
    userRoot = toJS(userRoot);
    return (
      <div className="tab-content-orgStruc-container">
          <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@l0ji78`}
          type={1}
          hasBorder
          whiteBackground
          replaceDatas={userRoot}
          customIcon={"icon-coms-Reset"}
          inputStyle={{minHeight: "30px",lineHeight:"30px" }}
          addOnClick={this.resetUserRoot}
          onChange={this.changeUserRoot}
        />
        <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@qvv555`} height={Util.getCurrentHeight() - 100}>
          <WeaOrgTree ecId={`${this && this.props && this.props.ecId || ''}_WeaOrgTree@fz94b6`}
            dataUrl="/api/hrm/base/getHrmResourceTree"
            rootKey="rootManager"
            treeNodeClick={this.chooseUser}
            selectedKeys={_selectKey}
            onNodeSelect={this.onNodeSelect}
            params={Array.isArray(userRoot) && userRoot[0] ? {rootid: userRoot[0].id} : {rootid:hrmId}}
          />
        </WeaNewScroll>
      </div>
    );
  }
  chooseUser = (e) =>{
    let hrmId = '',
    hrmName = undefined;
    if (e.selected) {
      hrmId = e.node.props.id;
      hrmName = e.node.props.name;
    }
    if(hrmId) {
      let params = {
        id:  hrmId,
        name: hrmName,
      }
      this.store.updateHrmId(hrmId)
      this.store.onWeaOrgTreClick(params);
    }
  }

  onNodeSelect =(ckey)=>{
    this.setState ({_selectKey:ckey});
  }

  resetUserRoot=()=> {
    this.store.updateUserRoot();
    this.store.updateHrmId();
  }

  changeUserRoot=(ids, names, datas)=> {
    this.store.updateUserRoot(datas);
  }

  /**
   * 我的关注Index页面内容
   */
  get attentionContent() {
    const {
      allAttentions,
      loadings: {treDataLoading},
      onALSearchHandler,
      addMyAttention,
    } = this.store;

    return (
      <div className="tab-content-attention-container">
         <div className="search">
          <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@4rmoez`}
            placeholder={i18n.label.plzInputKeywords()}
            onSearch={(v) => onALSearchHandler(v)}
          />
          <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@1ubees`} title={i18n.button.addAttention()} placement="bottom">
            <div className="customized-browser">
              <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@n5069b`}
                type="17"
                inputStyle={{ width: "28px", height: "28px" }}
                title={i18n.label.multHrmResource()}
                onChange={(ids, names, datas) => addMyAttention(ids,names,datas)}
                isSingle={false}
              />
            </div>
          </Tooltip>
        </div>
        <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@bcbwig`} height={Util.getCurrentHeight()- 101  }>
          <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@vvyefi`} spinning={treDataLoading}>
          {allAttentions && allAttentions.length > 0 && allAttentions[0] ? (
          <div className="allAttentions">
                {allAttentions.map((item, index) => {
                  return (
                    <div
                      className={`attention ${item.dcheck ? "on" : ""}`}
                      key={index}
                      onClick={(e) => {
                        this.onAttentionClick(e,item);
                      }}
                    >
                      <span className="avatar">
                        <WeaAvatar ecId={`${this && this.props && this.props.ecId || ''}_WeaAvatar@7egvfi@${index}`} requestParams={item.avatar} />
                      </span>
                      <div className="info">
                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@8vwvm7@${index}`} title={item.name}>
                          <span className="nameSpan">
                            {item.name}
                          </span>
                        </Tooltip>
                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@s8p3he@${index}`} title={`${item.dep}  ${item.post}`}>
                          <span
                            onClick={(e) => {
                              this.onAttentionClick(e,item);
                            }}
                            className="otherSpan"
                            dangerouslySetInnerHTML={ { __html: `${item.dep}&nbsp;&nbsp;${item.post}`}}
                          />
                        </Tooltip>
                      </div>
                      <div className="cancle">
                        <div className="cancleAttention">
                          <i className="icon-coms-CancelConcern" />
                          <span
                            class="cancelAttentionSpan"
                            onClick={(e) => this.onCancleAttention(e,index,item)}
                          >
                            {i18n.button.cancleAttention()}
                          </span>
                        </div>
                      </div>
                    </div>
                  );
                })}
          </div>
        ) : (
          Util.renderAlertPage(
            '<span style="color:rgb(197,197,197)">' +
              i18n.label.noDataForShow() +
              "</span>",
            "icon-coms-blank",
            "20%",
            Util.getCurrentHeight()- 257,
            this.props.ecId || ''
          )
        )}
          </Spin>
        </WeaNewScroll>
      </div>
    );
  }

  render() {
    const { activeTreTabKey,tabConfig:{leftTreTab},onTreTabChange } = this.store;
    return (
      <div class="wea-workrelate-risk-attentionOrgTree-container">
        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@32hptd`}
          datas={toJS(leftTreTab).tabs}
          keyParam={toJS(leftTreTab).keyParam} //主键
          selectedKey={activeTreTabKey}
          onChange={(v) => onTreTabChange(v)}
        />
          {activeTreTabKey === "2" ? this.orgStrucContent : this.attentionContent}
      </div>
    );
  }
}
